<template>
  <div class="flex-col page-wrapper">
    <a-card :bordered="false">
      <div class="flex top-bar">
        <div class="flex  aic">
          <span>统计周期：</span>
          <a-radio-group default-value="a" size="small" button-style="solid">
            <a-radio-button value="a">
              本月
            </a-radio-button>
            <a-radio-button value="b">
              上月
            </a-radio-button>
            <a-radio-button value="c">
              上季度
            </a-radio-button>
            <a-radio-button value="d">
              本年度
            </a-radio-button>
            <a-radio-button value="d">
              上年度
            </a-radio-button>
          </a-radio-group>

          <a-month-picker
            style="margin-left: 14px;"
            size="small"
            placeholder="选择月份"
          />

          <span style="margin-left: 14px;">管理部门：</span>
          <a-select size="small" default-value="lucy" style="width: 120px">
            <a-select-option value="jack">
              Jack
            </a-select-option>
            <a-select-option value="lucy">
              Lucy
            </a-select-option>
            <a-select-option value="disabled" disabled>
              Disabled
            </a-select-option>
            <a-select-option value="Yiminghe">
              yiminghe
            </a-select-option>
          </a-select>
        </div>

        <span>统计时间截至：2025-07-01</span>
      </div>
    </a-card>

    <a-row :gutter="16">
      <a-col :sm="24" :md="12" :xl="6">
        <chart-card title="资产总数" total="126,560台">
          <a-tooltip title="提示" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend flag="up" style="margin-right: 16px;">
              <span slot="term">月新增</span>
              2台
            </trend>
            <trend flag="down">
              <span slot="term">月报废</span>
              0台
            </trend>
          </div>
          <template slot="footer">
            <div class="card-arr-foot">
              <span>月净增长<span>2台</span></span>
            </div>
          </template>
        </chart-card>
      </a-col>

      <a-col :sm="24" :md="12" :xl="6">
        <chart-card title="资产总值" total="126,560万元">
          <a-tooltip title="提示" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <template slot="footer">
            <div class="card-arr-foot">
              <span>月净增长<span>20万元</span></span>
            </div>
          </template>
        </chart-card>
      </a-col>

      <a-col :sm="24" :md="12" :xl="6">
        <chart-card title="资产现值" total="657,560万元">
          <a-tooltip title="提示" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <template slot="footer">
            <div class="card-arr-foot">
              <span>月净增长<span>0.00元</span></span>
            </div>
          </template>
        </chart-card>
      </a-col>

      <a-col :sm="24" :md="12" :xl="6">
        <chart-card
          title="累计资产折旧计提"
          :showContent="true"
          total="2355.76万元"
        >
          <a-tooltip title="提示" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <template slot="footer">
            <div class="card-arr-foot">
              <div>
                <span>仍计提折旧的资产数</span>
                <span>282台</span>
              </div>
              <div>
                <span>完成提折旧的资产数</span>
                <span>0台</span>
              </div>
            </div>
          </template>
        </chart-card>
      </a-col>
    </a-row>

    <chart1 />
  </div>
</template>
<script>
import { ChartCard, Trend } from "@/components";
import { mixin } from "@/utils/mixin";
import chart1 from "./chart1.vue";
export default {
  name: "dataView",
  mixins: [mixin],
  components: {
    ChartCard,
    Trend,
    chart1,
  },
  data() {
    return {
      visible: false,
      // 查询条件
      url: {},
    };
  },
  computed: {},
  created() {},
  methods: {},
  watch: {},
};
</script>
<style scoped>
.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.acc {
  align-content: center;
}

.aic {
  align-items: center;
}

.top-bar {
  justify-content: space-between;
}

.page-wrapper {
  gap: 10px;
  padding: 10px;
}

.card-arr-foot {
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
